<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .demo{width:450px; margin:20px }
        .select_side{float:left; width:200px}
        select{width:200px; height:200px;border: 1px solid #404040;font-weight: bold}
        .select_opt{float:left; width:40px; height:15%; padding-top: 80px;padding-left: 10px;}
        .select_opt p{width:26px; height:26px; margin-top:6px; background:url(/images/arr.gif) no-repeat; cursor:pointer; text-indent:-999em}
        .select_opt p#toright{background-position:2px 0}
        .select_opt p#toleft{background-position:2px -22px}
    </style>
</head>
<body>
<form action="/user" method="POST" id="addForm">
    <input type="hidden" name="account" id="account">
    <input type="hidden" name="roleStr" id="roleStr">
    <div id="checkRet"></div>
    账号: <input type="text" id="tempaccount" onchange="checkAccount();" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))" maxlength="10">   <br>
    密码: <input type="password" name="password" id="password">  <br>
    密码: <input type="password"id="repassword">  <br>
    昵称: <input type="text" name="name" id="name" maxlength="10">  <br>
    性别: 男<input type="radio" name="sex" value="1"> &nbsp; 女 <input type="radio" name="sex" value="0"><br>
    角色:
    <div class="demo">
        <div class="select_side">
            <p align="center">待选区</p>
            <select id="selectL" name="selectL" multiple="multiple">
                <% for(var i = 0; i < list.length; i++) { %>
                    <tr>
                        <option value="<%= list[i]._id %>"><%= list[i].name %></option>
                    </tr>
                <% } %>
            </select>
        </div>
        <div class="select_opt">
            <p id="toright" title="添加">&gt;</p>
            <p id="toleft" title="移除">&lt;</p>
        </div>
        <div class="select_side">
            <p align="center">已选区</p>
            <select id="selectR" name="selectR" multiple="multiple">
            </select>
        </div>
        <input type="button" onclick="isfull();" value="提交">
    </div>

</form>
<script src="/javascripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
    //选择框相关
    $(function(){
        var leftSel = $("#selectL");
        var rightSel = $("#selectR");
        $("#toright").bind("click",function(){
            leftSel.find("option:selected").each(function(){
                $(this).remove().appendTo(rightSel);
            });
        });
        $("#toleft").bind("click",function(){
            rightSel.find("option:selected").each(function(){
                $(this).remove().appendTo(leftSel);
            });
        });
        leftSel.dblclick(function(){
            $(this).find("option:selected").each(function(){
                $(this).remove().appendTo(rightSel);
            });
        });
        rightSel.dblclick(function(){
            $(this).find("option:selected").each(function(){
                $(this).remove().appendTo(leftSel);
            });
        });
    });
</script>
<script>
    //账号检测
    function checkAccount() {
        $("#checkRet").html('<img src="/images/loading.gif" width="15px">&nbsp;&nbsp;查询账号是否可用');
        var account = $("#tempaccount").val();
        $.ajax({
            data: {account:account},
            url: '/user/checkAccount',
            type:"post",
            dataType: 'JSON',
            success: function(data){
                if(data.flag==true){
                    $("#checkRet").html('<img src="/images/wrong.png" width="15px">&nbsp;&nbsp;账号:'+account+'已被使用');
                    $("#tempaccount").val("");
                }else{
                    $("#checkRet").html('<img src="/images/right.png" width="15px">&nbsp;&nbsp;账号:'+account+'可以使用');
                    $("#account").val(account);
                }
            },
            error: function(){
                alert("验证失败");
            }
        });
    }
    //校验
    function isfull() {
        var role = [];
        $("#selectR option").each(function(){
            alert($(this).val());
            role.push($(this).val());
        });
        $("#roleStr").val(role);
        if($("#tempaccount").val()==""){
            alert("请填写账号");
            return;
        }
        if($("#account").val()==""){
            alert("请等待验证");
            return;
        }
        if($("#password").val()==""){
            alert("请填写密码");
            return;
        }
        if($("#repassword").val()!=$("#password").val()){
            alert("请保持密码输入一致");
            return;
        }
        if($("#name").val()==""){
            alert("请填写昵称");
            return;
        }
        if($('input:radio[name="sex"]:checked').val()==null){
            alert("请选择性别");
            return;
        }
        $("#addForm").submit();
    }
</script>
</body>
</html>